<template>
  <div class="password">
    <el-button @click="addRow">新增一行</el-button>
    <n-table
      ref="table"
      :data="tableData"
      :columnOptions="columnOptions"
      @row-commit="commitRow"
      @edit-rows-change="changeEditRows"
      style="width: 100%">
    </n-table>
  </div>
</template>

<script type="text/jsx">
  import NTable from 'base/nkg-table/nkg-table'

  export default {
    components: {
      NTable
    },
    data() {
      return {
        columnOptions: [
          {
            type: 'selection'
          },
          {
            label: '日期',
            prop: 'date',
            editable: true,
            editType: 'el-date-picker',
            options: {
              onChange(val, row) {
                console.log(val, row)
              },
              on : {
              },
              props: {
              },
            },
            rules: [
              { required: true, message: '日期不能为空'},
            ]
          },
          {
            label: '姓名',
            prop: 'name',
            formatter: (row, column, cellValue) => {
              return cellValue + '先生'
            },
            editable: true,
            rules: [
              { required: true, message: '姓名不能为空'}
            ],
            options: {
              onChange(name) {
                console.log(name)
              }
            }
          },
          {
            label: '地址',
            prop: 'address',
            editable: true,
            editType: 'el-select',
            options: {
              selectData: [
                { address: '景明佳园', id: '1'},
                { address: '京妆商务', id: '2'}
              ],
              selectLabel: 'address',
              selectValue: 'id',
              renderLabel: (label,value) => {
                return value + '：' + label
              },
              onChange(val,row) {
                console.log(val,row)
              }
            }
            ,
          }
        ],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      commitRow({row,index}) {
        console.log(row, index)
      },
      changeEditRows(row) {
        console.log(row)
      },
      changeDate(val){
        console.log(val)
      },
      addRow() {
        this.$refs.table.addRow({
          date: '',
          name: '',
          address: ''
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .header
    padding 10px
    background #fff
    margin-bottom 10px
</style>
